import React, { useRef, useState, useEffect } from "react";
import _ from "lodash";
import styled from "styled-components";
import { NavLink, Outlet, useParams } from "react-router-dom";
import Footer from "@/components/Footer";
import api from "@services/";
import * as antdHelper from "@utils/antd-helper";

import SearchBar from "@/components/SearchBar";
import Overview from "./components/Overview";
import MySpaceInfo from "./components/MySpaceInfo";
import MinerSpaceInfo from "./components/MinerSpaceInfo";
import StorageMining from "./components/StorageMining";
import StorageMiningRevenue from "./components/StorageMiningRevenue";
import RevenueAccount from "./components/RevenueAccount";
import ConsensusMining from "./components/ConsensusMining";
import TabList from "./components/TabList";
import common from "@/utils/common";


const Main = ({ className }) => {
	const { q } = useParams();
	const [accountInfo, setAccountInfo] = useState();

	document.title = "Account-CESS Scan";
	const initInfo = async () => {
		let res = await api.account.info(q);
		console.log(res);
		if (res.msg != 'ok') {
			return antdHelper.alertError(res.msg);
		}
		if (!res.data) {
			return antdHelper.alertError('API error');
		}
		res.data.accountId = q;
		res.data.has_file = true;
		setAccountInfo(res.data);
	}
	useEffect(() => {
		initInfo();
	}, [q]);
	useEffect(() => {
		common.showAPIUrl();
	}, []);
	return (
		<div className={className}>
			<div className="containner-in">
				<SearchBar background={"#f4f4f4"} height="100px" />
				<div className="content">
					<Overview accountInfo={accountInfo} />
					{accountInfo?.is_storage && <>
						<MinerSpaceInfo className="space-info" accountInfo={accountInfo} />
						<StorageMining className="storage-mining mtop20" accountInfo={accountInfo} />
						<RevenueAccount className="revenue-account mtop20" accountInfo={accountInfo} />
					</>}

					{accountInfo?.is_revenue && <>
						<StorageMiningRevenue className="storage-mining-revenue mtop20" accountInfo={accountInfo} />						
					</>}
					{accountInfo?.is_consensus && <ConsensusMining className="consensus-mining mtop20" accountInfo={accountInfo} />}
					<TabList className="list" accountInfo={accountInfo} />
				</div>
				<Footer />
			</div>
		</div>
	);
};
export default styled(Main)`
	display: block;
	overflow: hidden;
	.mtop20{
		margin-top:20px;
	}
	.link{
		color:#0057FF;
		cursor: pointer;
	}
	a{
		text-decoration: none;
    	color: #0057FF;
	}
	.box-con {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		padding: 6px 0 5px;
		.gateway-link{
			color:#0057FF!important;
			cursor: pointer;
		}
		.box {
			width: 25%;
			height: 80px;
			display: flex;
			flex-direction: row;
			align-items: center;
			.img {
				width: 34px;
				height: 34px;
				margin: 0 20px;
			}
			.div {
				display: flex;
				flex-direction: column;
				margin-left:20px;
				.span {
					font-size: 14px;
					color: #6b7486;
					line-height: 20px;
				}
				.label {
					font-size: 20px;
					color: #282e39;
					line-height: 18px;
					font-weight: lighter;
				}
			}
		}
	}	
	.o-title {
		display: flex;
		width: 100%;
		margin-top: 40px;
		overflow: hidden;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		span{
			margin:0 10px 0 0;
			width:46%;
			max-width: 200px;
			height: 50px;
			line-height: 50px;			
			text-align: center;
			overflow: hidden;
			display: block;
			border-radius: 5px;
		}
		.curr{
			background-color: #000000;
			color: #ffffff;
			cursor: not-allowed;
		}
		.uncurr{
			background-color: #eeeeee;
			color: #aeaeae;
			cursor: pointer;
		}
	}
	@media screen and (max-width: 700px) {
		.o-title {
			height:auto!important;
			span{				
				margin:5px 2%!important;
				width:46%!important;
			}
		}
		.box-con {
			.box {
				width: 100%;
				height: auto!important;
				padding:7px 0;
				.div {
					width: calc(100% - 20px);
					margin-left:10px!important;
					flex-direction: row!important;
					justify-content: space-between;
					align-items: center;
					.span {
						font-size: 16px!important;
					}
					.label {
						font-size: 16px!important;
					}
				}
			}
		}	
	}
	
`;
